<template>
  <div >
    <el-container>
      <el-header class="element-head">
        <div class="user-info">
          <h2>个人信息</h2>
          <div class="info-item">
            <strong>用户名：</strong> {{ this.userInfo.username }}
          </div>
          <div class="info-item">
            <strong>电话：</strong> {{ this.userInfo.phone }}
          </div>
          <div class="info-item">
            <strong>邮箱：</strong> {{ this.userInfo.email }}
          </div>
          <br>
          <el-button type="primary" plain @click="changeInfo" class="user-settings">修改信息</el-button>
          <div v-if="this.dialogVisible" class="modal">
            <div class="modal-content" style="width: 30%">
              <h2>修改信息</h2>
              <form >
                <div class="form-group">
                  <label for="username">用户名</label>
                  <input type="text" id="username" disabled="true"  v-model="this.userInfo.username"  >
                </div>
                <div class="form-group">
                  <label for="phone">电话</label>
                  <input type="text" id="phone" v-model="this.userInfo.phone" >
                </div>
                <div class="form-group">
                  <label for="email">邮箱</label>
                  <input type="email" id="email" v-model="this.userInfo.email">
                </div>
                <div class="form-group">
                  <button for="verificationCode">验证码</button>
                  <input type="text" id="verificationCode" placeholder="请从微信公众号获取验证码">
                </div>
                <div class="modal-footer">
                  <button @click="dialogVisible = false" style="border: 1px solid #000000;" type="button">取消</button>
                  <button type="submit" @click="modifyInfo()" >确定</button>
                </div>
              </form>
            </div>
          </div>
          <br>
          <!--      border: 2px solid #000000;-->
          <el-button type="primary" plain @click="changePassword" class="user-settings">修改密码</el-button>
          <div v-if="this.dialogPassword" class="modal">
            <div class="modal-content" style="width: 30%">
              <h2>修改信息</h2>
              <form >
                <div class="form-group">
                  <label for="username">用户名</label>
                  <input type="text" id="username" disabled="true"  v-model="this.userInfo.username"  >
                </div>
                <div class="form-group">
                  <label for="username">密码</label>
                  <input type="text" id="username"  v-model="this.userInfo.password"  >
                </div>
                <div class="form-group">
                  <button for="verificationCode">验证码</button>
                  <input type="text" id="verificationCode" placeholder="请从微信公众号获取验证码">
                </div>
                <div class="modal-footer">
                  <button @click="dialogPassword = false" style="border: 1px solid #000000;" type="button">取消</button>
                  <button type="submit" @click="modifyPassword()" >确定</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </el-header>


    </el-container>
  </div>

</template>


<script>
// import { ref } from 'vue';
import { defineComponent } from 'vue';
import {doPost} from "@/http/HttpRequest";
export default defineComponent({
  components: {
  },
  name: 'UserAccountPage',
  props:['dataFromUserPage'],

  data() {
    return {
      dialogVisible: false,
      dialogPassword: false,
      userInfo:{
        username : '',
        password : '',
        phone : '',
        email : '',
        code : '',
      },
    };
  },
  mounted() {
    setTimeout(() => {
      this.userSet();
    }, 1000); // 延迟一秒后刷新页面
  },
  methods: {
    modifyInfo(){
      const sendModify = {
        username: this.userInfo.username,
        phone: this.userInfo.phone,
        email: this.userInfo.email,
        code: this.userInfo.code,
      }
      doPost("/api/v1/user/query", JSON.stringify(sendModify)).then(resp => {
        if (resp.data.code === "0000") {
          window.alert(resp.data.date.modifyInfo);
        }
      })
    },
    modifyPassword(){
      const sendPassword = {
        username: this.userInfo.username,
        password: this.userInfo.password,
        code: this.userInfo.code,
      };
      doPost("/api/v1/user/cipher", JSON.stringify(sendPassword)).then(resp => {
        if (resp.data.code === "0000") {
          window.alert(resp.data.date.modifyPassword);
        }
      })
    },
    changeInfo() {
      // 在这里实现修改密码的逻辑，例如弹出一个对话框或者跳转到修改密码页面
      console.log('点击了修改信息按钮');
      this.dialogVisible = true;
      // 可以编写修改密码的具体代码
    },
    changePassword(){
      console.log('点击了修改密码按钮');
      this.dialogPassword = true;
    },
    userSet(){
      this.userInfo.username = this.dataFromUserPage.username;
      this.userInfo.password = this.dataFromUserPage.password;
      this.userInfo.phone= this.dataFromUserPage.phone;
      this.userInfo.email = this.dataFromUserPage.email;
    }
  }
});
</script>

<style>
.element-head{
  font-family: fantasy;
}

.user-info {
  background-color: #f0f0f0;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin: 20px 0;
}

.info-item {
  margin-bottom: 10px;
}

.info-item strong {
  margin-right: 10px;
  font-weight: bold;
}

.user-settings {
  display: flex; /* 使用 flex 布局 */
  justify-content: space-between; /* 将子元素分散对齐 */
  //align-items: center; /* 垂直居中对齐 */
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明遮罩 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
}

.form-group {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.form-group label {
  width: 100px; /* 调整标签宽度 */
  margin-right: 10px; /* 标签与输入框之间的间距 */
}

.form-group button{
  width: 100px; /* 调整标签宽度 */
  margin-right: 10px; /* 标签与输入框之间的间距 */
  margin-left: 0px;
  background: linear-gradient(-135deg, transparent 10%, #04e6fb 10%, #65ff9a 100%) top right, linear-gradient(-45deg, transparent 10%, #04e6fb 10%, #65ff9a 100%) bottom right, linear-gradient(-135deg, #04e6fb 0, #65ff9a 90%, transparent 90%) top left, linear-gradient(-45deg, #04e6fb 0, #65ff9a 90%, transparent 90%) bottom left;
  background-repeat: no-repeat;
}

.form-group input {
  flex: 1; /* 输入框填充剩余空间 */
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.modal-footer {
  margin-top: 20px;
  text-align: right;
  display: flex;
  justify-content: flex-end; /* 按钮右对齐 */
}

user-settings{
  background-color: #000000;
  color: #0029ff;
}

button {
  padding: 8px 16px;
  margin-left: 10px;
  cursor: pointer;
  border-radius: 4px;
  border: none;
  background-color: #3591d5;
  color: #000000;
}

button[type="submit"] {
  background-color: #67c23a; /* 绿色主题 */
}

button[type="button"] {
  background-color: #ffffff; /* 灰色主题 */
}
</style>
